<template>
  <section class="onduty">
    <el-col :span="24" class="action-bar">
        <el-button type="primary" size="medium" @click="addFormVisible = true">添加</el-button>
    </el-col>

    <!--列表-->
    <el-table :data="users" highlight-current-row class="el-table-style" >
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column type="index" width="60" sortable>
			</el-table-column>
        <el-table-column prop="start_time" label="值班开始时间"  sortable>
        </el-table-column>
		<el-table-column prop="end_time" label="值班结束时间"  sortable>
        </el-table-column>
        <el-table-column prop="realname" label="姓名"  sortable>
        </el-table-column>
        <el-table-column prop="vip_name" label="会员级别"  sortable>
        </el-table-column>
        <el-table-column label="操作" width="250">
            <template slot-scope="scope">
				<div>
					<el-button type="danger" class="danger-btn" size="mini" @click="getDakaInfoDelete(scope.row.id)">删除</el-button>
				</div>
			</template>
        </el-table-column>
    </el-table>
    <el-col :span="24" class="footer-bar">
        <div class="page-code">
			<div class="page-code">
				<el-pagination
					background
					:page-size="16"
					layout="prev, pager, next"
					:total="totalPage"
					@current-change="pageChange"
						>
				</el-pagination>
			</div>
		</div>
    </el-col>
		
		<!-- 新增 -->
		<el-dialog :visible.sync="addFormVisible" @close="initData" >
			<el-form  label-width="120px"  ref="addForm">
				<el-form-item label="会员">
					<el-select
					v-model="executor"
					filterable
					remote
					:loading="loading"
					placeholder="请输入会员名"
					@change="getExecutor"
					:remote-method="searchName"
						>
					<el-option
						v-for="(item,index) in vipList"
						:key="item.vip_id"
						:label="item.realname"
						:value="index">
					</el-option>
				</el-select>
				<el-button size="medium " type="primary" @click="addExecutor">添加</el-button>
				<div v-for="(item,index) of executorList" :key="index" class="executorList">
					<div>
						<span>姓名：{{item.realname}}</span>
						<span>会员等级：{{item.vip_name}}</span>
						<span>电话号码: {{item.phone}}</span>
						<i class="el-icon-remove"  @click.stop="deleteExecutor(index)"></i>
					</div>
				</div>
				</el-form-item>
				<el-form-item label="值班时间">
					<el-col :span="11">
						<el-date-picker type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" v-model="period.startTime" style="width: 100%;"></el-date-picker>
					</el-col>
					<el-col class="line" :span="2" style="text-align:center">-</el-col>
					<el-col :span="11">
						<el-date-picker type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"  v-model="period.endTime" style="width: 100%;"></el-date-picker>
					</el-col>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click="getDakaInfoInsert">确认</el-button>
			</div>
		</el-dialog>
		<!-- 新增 end -->

		<!-- 查看详情 -->
		<el-dialog title="查看详情" :visible.sync="detailFormVisible" width="30%">
			<el-form  label-width="120px"  ref="detailForm">
				<el-form-item label="序号" prop="number">
					<div>01</div>
				</el-form-item>
				<el-form-item label="值班时间" prop="name">
					<div>2017-1-1 12：15</div>
				</el-form-item>
				<el-form-item label="值班人员" prop="phone">
					<div>1231231231</div>
					<div>1231231231</div>
					<div>1231231231</div>
					<div>1231231231</div>
				</el-form-item>
			</el-form>
		</el-dialog>
		<!-- 查看详情 end -->
  </section>
</template>

<script>
export default {
	data(){
		return {
			addFormVisible: false,//新增界面是否显示
			detailFormVisible:false,//查看详情弹窗
			//新增界面数据
			spanArr:[],//遍历出的合并项
			pos:'',
			users:[],
			period:{//值班时间
				startTime:'',
				endTime:''
			},
			executor:'',//选中的值班人员
			executorList:[],//选中的值班人员数组
			vipList: [],//搜索的值班人员

			list: [],
			loading: false,
			page:1,
			totalPage:0
		}
	},
	computed: {
		executorIdList:function(val){
			const list = this.executorList;
			const newList=	list.map(item=>{
				return item.id
			})
			return newList
		}
	},
	methods:{
		getExecutor(e){
			this.executor=e;
		},
		addExecutor(){
			//添加执行者
			if(isNaN(this.executor) || this.executor===''){
				return
			}
			const is_join= this.executorList.find(item=>{
				//判断是否已经在筛选的队列里
				return item.user_id==this.vipList[this.executor].user_id
			})
			if(is_join){
				this.executor='';
				return
			}
			this.executorList.push(this.vipList[this.executor]);
			this.executor='';
		},
		deleteExecutor(index){
			//删除执行者
			this.executorList.splice(index,1);
		},
		async searchName(name){
			//搜索用户名
			this.loading=true;
			if(!name){
				this.vipList=[];
				this.loading=false
				return
			}
			const res=await this.$api.getUserVipList ({
				page:0,
				pagesize:16,
				realname:name
			})
			if(res.data.level=='success'){
				this.vipList=res.data.data.user_vip_list
			}
			this.loading=false
    	},
		async getDakaInfoInsert() {
			//添加值班表
			const res=await this.$api.getDakaInfoInsert({
				uids:this.executorIdList,
				startTime:this.period.startTime,
				endTime:this.period.endTime
			})
			if(res.data.level=='success'){
				this.getUserDakaInfoList();
				this.$message({
					type: 'success',
					message: res.data.message
				});
				this.addFormVisible=false
			}else{
				this.$message({
					type: 'error',
					message: res.data.message
				});
			}
	  },
	  async getDakaInfoDelete(id){
		  //删除值班信息
		  const judge= this.$confirm('删除该值班?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(async() => {
					const res=await this.$api.getDakaInfoDelete({ id})
					if(res.data.level=='success'){
						this.getUserDakaInfoList();
						this.$message({
							type: 'success',
							message: res.data.message
						});
					}else{
						this.$message({
							type: 'error',
							message: res.data.message
						});
					}
					
				}).catch(() => {
          
			});
		  
	  },
      cellMerge({ row, column, rowIndex, columnIndex }) {
         if (columnIndex === 2) {
                const _row = this.spanArr[rowIndex];
             const _col = _row > 0 ? 1 : 0;
                return {
                    rowspan: _row,
                     colspan: _col
                }
        }
    },
      getSpanArr(data) {　
          //拆分同一个值班时间
        for (var i = 0; i < data.length; i++) {
                if (i === 0) {
                    this.spanArr.push(1);
                    this.pos = 0
                } else {
                // 判断当前元素与上一个元素是否相同
            if (data[i].amissionTime === data[i - 1].amissionTime) {
                        this.spanArr[this.pos] += 1;
                        this.spanArr.push(0);
                    } else {
                        this.spanArr.push(1);
                        this.pos = i;
                    }
                }
          }
		},
		async getUserDakaInfoList(){
			//获取值班列表
			const res=await this.$api.getDakaInfoList({
				page:this.page
			})
			if(res.data.level=='success'){
				this.users=res.data.data.daka_info_list;
				this.totalPage=res.data.data.total;

			}
		},
		pageChange(e){
			//翻页
			this.page=e;
			this.getUserDakaInfoList()
		},
		initData(){
			this.period.startTime='';
			this.period.endTime='';
			this.executorList=[];
		}
	},
    mounted() {
		// this.getSpanArr(this.users);
		this.getUserDakaInfoList()
    },
}
</script>
<style lang='scss' scoped>
  .onduty{
    .action-bar{
			background-color: #f2f2f2;
			height: 60px;
			margin: 10px 0px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
			}
		}
		.address-detail{
			margin-top:20px;
		}
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #f2f2f2;
			padding: 8px;
			margin: 10px 0px;
			box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}
  }
</style>

<style>
	.el-pagination.is-background .el-pager li,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .btn-next
	{
		background-color: #fff;
		border: 1px solid #f1f1f1;
		margin: 0;
	}

	.onduty .el-dialog__body{overflow: auto;}
</style>
